import React, { useState, useRef } from 'react';
import { View, Text, Button } from '@tarojs/components';
import { Row, Col, NavBar, } from '@antmjs/vantui';
import Taro, { getMenuButtonBoundingClientRect} from '@tarojs/taro';
import './index.scss'

export default function ConinsDetail() {
    const btn = getMenuButtonBoundingClientRect();
     //获取当前路由参数
     const instance = Taro.getCurrentInstance().router.params
    const [url, setUrl] = useState(null)
    const [isViewAdver, setIsViewAdver] = useState(false)

    const createStepView = (num, text, index, img) => {
        return <View className='step-view'>
            <View className='view-num'
            ><Text className='view-step-tit'>{num}</Text></View>
            <Text className='view-stpe-subtit'>{text}</Text>
        </View>
    }

    const clipsInfo = () => {
        Taro.setClipboardData({
            data: instance?.link,
            success: function (res) {
                Taro.getClipboardData({
                    success: function (res) {
                        console.log(res.data) // data
                    }
                })
            }
        })
    }

    const viewAdver = () => {
        // 若在开发者工具中无法预览广告，请切换开发者工具中的基础库版本
        // 在页面中定义激励视频广告
        let videoAd = null

        // 在页面onLoad回调事件中创建激励视频广告实例
        if (wx.createRewardedVideoAd) {
            videoAd = wx.createRewardedVideoAd({
                adUnitId: 'adunit-faebfa6148bf55c4'
            })
            videoAd.onLoad(() => { })
            videoAd.onError((err) => {
                console.error('激励视频光告加载失败', err)
            })
            videoAd.onClose((res) => {
                videoAd.offClose()   //加在这里，而不是if后面
                if (res && res.isEnded) {
                    // 写入你想奖励的内容
                    setIsViewAdver(true)
                }
                else { }
            })
        }

        // 用户触发广告后，显示激励视频广告
        if (videoAd) {
            videoAd.show().catch(() => {
                // 失败重试
                videoAd.load()
                    .then(() => videoAd.show())
                    .catch(err => {
                        console.error('激励视频 广告显示失败', err)
                    })
            })
        }
    }

    return (
        <View className='mycoins-frame-view'>
            <NavBar title='文件下载' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed />
            <View className='line-bg-view' style={{ paddingTop: btn.bottom + 10 }}></View>
            <View className='down-bg-view'>
                <View className='down-view'>
                    <View className='down-tit-view'>
                        <View className='down-line-view{'></View>
                        <Text style={{ marginLeft: 8 }}>下载地址</Text>
                    </View>
                    {isViewAdver ? <View className='tip-view'>
                        <Text className='tip-view'>
                            {'点击下方按钮即可复制下载链接'}
                        </Text>
                        <Row>
                            <Col span={8}>
                                <Button onClick={clipsInfo} type='primary' className='down-btn'>123云盘链接</Button>
                            </Col>
                        </Row>
                    </View> : <View className='tip-view'>
                        <Text className='tip-view'>
                            {'点击观看视频广告获取下载链接'}
                        </Text>
                        <Row>
                            <Col span={8}>
                                <Button onClick={viewAdver} type='primary' className='down-btn'>观看广告</Button>
                            </Col>
                        </Row>
                    </View>}
                </View>
            </View>
            <View className='line-bg-view'></View>
            <View className='down-bg-view'>
                <View className='down-view'>
                    <View className='down-tit-view'>
                        <View className='down-line-view'></View>
                        <Text style={{ marginLeft: 8 }}>操作步聚</Text>
                    </View>
                    <View>
                        {createStepView(1, '复制上方下载地址', 1)}
                        {createStepView(2, '打开手机浏览器将复制的下载地址粘贴到浏览器中')}
                        {createStepView(3, '访问下载地址跳转到下载页面')}
                        {createStepView(4, '点击下载文件即可安装')}
                    </View>
                </View>
            </View>
        </View>
    );
}